
<style lang="less" scoped>
    .interactive{
        .content{
            margin: 20px;
            .el-input__inner{
                height: 40px;
            }
            .id-card{
                height: 40px;
                .icon{
                    width: 34px;
                    height: 34px;
                    background-color: #d8d8d8;
                    border-radius: 50%;
                    display: inline-block;
                }
                div{
                    display: inline-block;
                    margin-left: 10px;
                    max-width: calc(100% - 46px);
                    p{
                        height: 22px;
                        font-size: 16px;
                        color: #222222;
                        white-space:nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        cursor: default;
                    }
                    span{
                        height: 17px;
                        font-size: 12px;
                        color: #666666;
                        white-space:nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        cursor: default;
                    }
                }
            }
            .tag{
                float: left;
                margin:5px 10px;  
                height: 20px;
                line-height: 20px;
                padding: 0px 12px;
                background-color: #f3f3f3;
                border-radius: 4px;
                font-size: 12px;
                color: #409eff; 
                cursor: default;
                i{
                    cursor: pointer;
                }         
            }
            .addTag{
                margin: 5px 10px;
                height: 20px;
                width: 80px;
                line-height: 18px;
                text-align: center;
                border-radius: 4px;
                font-size: 12px;
                color: #666666;
                border: solid 1px #dcdfe6;
                i{
                    font-weight: bold;
                    margin-right: 5px;
                }
            }
            .table-fliter{
                margin: 30px 8px 10px;
                text-align: left;
                span{
                    display: inline-block;
                    font-size: 14px;
                    height: 14px;
                    line-height: 14px;
                    color: #acacac;
                    margin-right: 20px;
                    cursor: pointer;
                }
                .activeSpan{
                    color: #409eff;
                }
            }
        }
    }
</style>
<template>
    <div class="interactive">
        <div class="content">
            <el-input v-model="searchTag" suffix-icon="el-icon-search" placeholder="搜索标签" @keyup.enter.native="inputSearch"></el-input>
            <div class="table">
                <div class="table-fliter">
                    <span v-for="(item,key) in tagArr" :key="key" :class="[isTag==item.id?'activeSpan':'']" @click="tagSearch(item.id)">
                        {{item.name}}
                    </span>
                </div>
                <el-table :data="tableData" style="width: 100%;text-align:center;">
                    <el-table-column label="基本信息" width="">
                        <template slot-scope="scope">
                            <div class="id-card clearfix">
                                <img :src="scope.row.avatr_url" class="icon" alt="">
                                <div>
                                    <p :title="scope.row.nickname">{{ scope.row.nickname }}</p>
                                    <span :title="scope.row.dav_id">{{ scope.row.dav_id }}</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="signature" label="签名" width=""/>
                    <el-table-column label="标签" width="200">
                        <template slot-scope="scope">
                            <div class="clearfix">
                                <div v-for="(item,key) in scope.row.tags" :key="key" class="tag">
                                    <span @click="handleEdit(item)">
                                        {{item.title}}
                                        <i class="el-icon-close" v-if="Number(item.isEdit)===1"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="addTag"><i class="el-icon-plus"></i>添加标签</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="works" label="作品数" width=""/>
                    <el-table-column prop="fansNumber" label="粉丝数" width=""/>
                    <el-table-column prop="comments" label="评论次数" width=""/>
                    <el-table-column prop="followDate" label="关注日期" width=""/>
                    <el-table-column prop="lastDate" label="最后评论时间" width=""/>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'interactive',
    data(){
        return{
            searchTag:"",
            isTag:'',
            tagArr:[
                {"id":1,"name":"筛选条件"},
                {"id":2,"name":"筛选条件"},
                {"id":3,"name":"筛选条件"},
                {"id":4,"name":"筛选条件"},
            ],
            tableData:[
               {
                    "dav_id": "0015c9207",
                    "nickname": "昵称1昵称1",
                    "avatr_url": "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
                    "signature":"签名签名签名签名签名签名签名签名签名",
                    "works":"4322",
                    "tags":[
                        {'id':1,'title':"铁杆粉",'isEdit':0},
                        {'id':1,'title':"铁杆粉",'isEdit':1}
                        ],
                    "fansNumber":"123",
                    "comments":"46",
                    "followDate":"2019-12-10 12:12:12",
                    "lastDate":"2019-10-10 12:12:12",
                }
            ]
        }
    },
    // 初始化数据
    mounted() {
    },
    // 方法
    methods: {
        tagSearch(id){
            this.isTag = id;
        },
        inputSearch(){
            console.log(this.searchTag);
        }
    },
    // 计算属性
    computed: {},
    // 监听数据变化
    watch: {},
}
</script>
